import React from 'react';
import { history } from 'umi'
import { Popover, Button, Icon, Badge } from 'antd';
import { eventTrack } from '@/utils/track';
import { formatEllipsis } from '../utils';
import styles from './styles.less';

const colorList = [
    '#FFA808',
    '#5B8FF9',
    '#5BD8A6',
    '#5E7092',
    '#E8694A',
    '#6DC8EC',
    '#9270CA',
    '#FE914B',
    '#279A99',
    '#FF99C3'
];

const getcolor = index => colorList[index % colorList.length];

// 选中的样式
const styleObj = {
    badge: {
        normal: {
            backgroundColor: '#F0F0F0',
            color: '#BFBFBF',
            boxShadow: '0 0 0 1px #BFBFBF inset'
        },
        current: {
            backgroundColor: '#ffa808',
            color: '#fff',
            boxShadow: '0 0 0 1px #fff inset'
        }
    }
};

// 邮件列表顶部切换条
const MailSwitchBar = ({ data = [], currentMail, promptCount = {}, onChange }) => {
    const { promptDetail } = promptCount;

    // 邮箱未读数量
    const getMailBadgeCount = mail => {
        if (promptDetail) {
            const arr = promptDetail.filter(subItem => subItem.belongs === mail);
            if (arr.length > 0) {
                return arr[0].unReadCount;
            }
        }
        return 0;
    };

    return (
        <div className={styles.mailSwitchBarWrap}>
            <ul className={styles.list}>
                {data.length > 0 && currentMail ? (
                    data.map((item, index) => (
                        <Badge
                            count={getMailBadgeCount(item.email)}
                            overflowCount={99}
                            offset={[-20, 0]}
                            style={currentMail === item.email ? styleObj.badge.current : styleObj.badge.normal}
                            key={item.email}
                        >
                            <li
                                className={currentMail === item.email ? styles.current : ''}
                                onClick={() => {
                                    if (onChange && currentMail !== item.email) {
                                        onChange(item.email);
                                    }
                                }}
                            >
                                <Icon
                                    theme="filled"
                                    type="mail"
                                    style={{
                                        color: currentMail === item.email ? '#fff' : getcolor(index),
                                        fontSize: 18,
                                        marginRight: 8
                                    }}
                                />
                                <span title={item.email}>{formatEllipsis(item.email, 21, 9, 9)}</span>
                            </li>
                        </Badge>
                    ))
                ) : (
                    <div>请先点击右侧按钮进入添加邮箱页面，最少添加一个邮箱</div>
                )}
            </ul>
            <div className={styles.btn}>
                <Popover content="邮箱管理" placement="top">
                    <Button
                        type="ghost"
                        icon="setting"
                        style={{ marginRight: 10, border: 0 }}
                        onClick={async() => {
                            const path = '/personal/message/mails/manage';
                            // 埋点
                            await eventTrack({
                                eventName: 'personal_message_mails_set_click',
                                pageName: 'personal_message_mails'
                            });
                            history.push({
                                pathname: path,
                                state: { tabRoute: true }
                            });
                        }}
                    />
                </Popover>
            </div>
        </div>
    );
};

export default MailSwitchBar;
